<template>
  <div>
    <!--模糊查询搜索框-->
    <div>
      <el-form :inline="true" :model="pageData" class="demo-form-inline">
        <el-form-item label="讲师名称">
          <el-input v-model="pageData.lecturerUserName" placeholder="请输入讲师名称"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="pageData.uphone" placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="pageData.statusId" placeholder="状态">
            <el-option label="正常" value="2"></el-option>
            <el-option label="禁用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="selectSub">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--主表格-->
    <el-table
      :data="teacherData"
      style="width: 100%"
      border
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="lecturerId"
        label="序号"
        width="180">
      </el-table-column>
      <!--带有超链接的电话，点击弹出详细信息-->
      <el-table-column
        prop="uphone"
        label="电话号码"
        width="180">
        <template slot-scope="scope">
          <el-link type="primary" @click="getMessage(scope.row)" :underline="false">{{scope.row.uphone}}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="lecturerUserName"
        label="讲师名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="uname"
        label="讲师姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="lecturerEmail"
        label="邮箱">
      </el-table-column>
      <el-table-column
      prop="lecturerRoportion"
      label="分成比例%">
      </el-table-column>
      <!--修改状态的开关-->
      <!--右侧操作栏-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleEdit(scope.row)">修改</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handleDelete(scope.row)">设置分成</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页插件-->
    <div style="text-align: right">
      <el-pagination
        background
        :current-page="pageData.current"
        :page-count="pageData.pages"
        :page-size="pageData.size"
        :total="pageData.total"
        :page-sizes="[5,10]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next">
      </el-pagination>
    </div>
    <!--设置分成对话框-->
    <el-dialog title="领课网络 —— 讲师分成" :visible.sync="setProportion" width="600px">
      <el-form :model="form" :rules="rules"  ref="form" style="padding-left: 50px">
        <el-form-item label="讲师分成：" prop="lecturerRoportion" :label-width="formLabelWidth" style="width: 350px">
          <el-input v-model="form.lecturerRoportion"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setProportion = false">取 消</el-button>
        <el-button type="primary" @click="subProportion('form')">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改弹出框-->
    <el-dialog title="领课网络 —— 信息修改" :visible.sync="dialogFormVisible" width="65%">
      <el-form :model="form" :inline="true">
        <div class="updTitle">讲师个人信息</div>
        <!--布局方式-->
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <!--输入框前名称-->
              <el-form-item label="用户手机：" :label-width="formLabelWidth" style="margin-right: 20%;">
                <!--输入框-->
                <el-input v-model="form.uphone" :disabled="true"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="讲师名称：" :label-width="formLabelWidth" >
                <el-input v-model="form.lecturerUserName" placeholder="请输入内容"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="邮箱：" :label-width="formLabelWidth" style="margin-right: 20%;">
                <el-input v-model="form.lecturerEmail" placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="排序：" :label-width="formLabelWidth">
                <template>
                  <el-input-number v-model="form.sort" @change="handleChange" :min="1" :max="100" size="medium" style="width: 100%"></el-input-number>
                </template>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-form-item label="教师简介：" :label-width="formLabelWidth">
                <el-input type="textarea" :rows="10" placeholder="请输入内容" v-model="form.introduce" style="width: 1000px"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <div class="updTitle">讲师分成及银行信息</div>

        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="银行名称：" :label-width="formLabelWidth" style="margin-right: 20%;">
                <el-input v-model="form.bankName" placeholder="请输入内容"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="银行卡号：" :label-width="formLabelWidth" >
                <el-input v-model="form.bankNum" placeholder="请输入内容"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="支行名称：" :label-width="formLabelWidth" style="margin-right: 20%;">
                <el-input v-model="form.bankBranch" placeholder="请输入内容"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="subject('form')">确 定</el-button>
      </div>
    </el-dialog>

    <!--点击电话的超链接弹出的信息框-->
    <el-dialog title="领课网络 —— 信息查看" :visible.sync="dialogVisible" ><!--:before-close="handleClose"-->


      <div class="messageDiv">
        <el-divider content-position="center" style="margin-top: 10px">讲师个人信息</el-divider>

        <el-row >
          <!--第一列-->
          <el-col :span="8">
            <div class="pad"><span class="span" style="float: left">头像:</span><el-avatar shape="square" :size="100" :src="form.uimage"></el-avatar></div>
          </el-col>
          <!--第二列-->
          <el-col :span="8">
            <div class="pad"><span class="span">讲师编号:</span>{{form.lecturerId}}</div><br/>
            <div class="pad"><span class="span">讲师名称:</span>{{form.lecturerUserName}}</div>
          </el-col>
          <!--第三列-->

        </el-row>

        <el-row >
          <el-col :span="8">
            <div class="pad"><span class="span">手机号:</span>{{form.uphone}}</div>
          </el-col>
          <el-col :span="8">
            <div class="pad"><span class="span">邮箱:</span>{{form.lecturerEmail}}</div>
          </el-col>
          <el-col :span="8">
            <div class="pad"><span class="span">职位:</span>{{form.jobTitle}}</div>
          </el-col>
        </el-row>

        <el-row >
          <el-col :span="8">
            <div class="pad"><span class="span">注册时间:</span>{{form.lecturerCreate}}</div>
          </el-col>
          <el-col :span="8">
            <div class="pad"><span class="span">排序:</span>{{form.sort}}</div>
          </el-col>
        </el-row>

      </div>

      <div class="messageDiv">
        <el-divider content-position="center" style="margin-top: 10px">简介</el-divider>
        <div style="height: 200px;padding: 0 20px">{{form.introduce}}</div>
      </div>

      <div class="messageDiv">
        <el-divider content-position="center" style="margin-top: 10px">简介</el-divider>

        <el-row >
          <el-col :span="8">
            <div class="pad"><span class="span">分成情况:</span>{{form.lecturerRoportion}}</div>
          </el-col>
          <el-col :span="8">
            <div class="pad"><span class="span">累计收入:</span></div>
          </el-col>
        </el-row>

        <el-row >
          <el-col :span="8">
            <div class="pad"><span class="span">已提现金额:</span></div>
          </el-col>
          <el-col :span="8">
            <div class="pad"><span class="span">可提现金额:</span></div>
          </el-col>
          <el-col :span="8">
            <div class="pad"><span class="span">冻结金额:</span></div>
          </el-col>
        </el-row>

        <el-row >
          <el-col :span="8">
            <div class="pad"><span class="span">银行名称:</span>{{form.bankName}}</div>
          </el-col>
          <el-col :span="8">
            <div class="pad"><span class="span">支行名称:</span>{{form.bankBranch}}</div>
          </el-col>
          <el-col :span="8">
            <div class="pad"><span class="span">银行卡号:</span>{{form.bankNum}}</div>
          </el-col>
        </el-row>

        <el-row >
          <el-col :span="8">
            <div class="pad"><span class="span">开户姓名:</span>{{form.uname}}</div>
          </el-col>
          <el-col :span="8">
            <div class="pad"><span class="span">累计收入:</span></div>
          </el-col>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style>
  .el-table .warning-row {
    background: lightgray;
  }
  .el-input {
    width:300px;
  }
  .updTitle{
    background-color: #F4F4F5;
    line-height: 40px;
    padding-left: 30px;
    color: gray;
    margin-bottom: 20px;
  }
  .messageDiv{
    margin-bottom: 40px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  .pad{
    padding: 18px;
  }
  .span{
    margin-right: 10px;
    font-weight: bold;
  }
</style>

<script>
  import qs from 'qs'
  export default {
    inject:['reload'],
    data() {
      return {
        teacherData: [],
        dialogFormVisible: false,//修改对话框
        dialogVisible: false,//点击电话的超链接弹出的信息框
        setProportion:false,//设置分成对话框
        form: {//主表格属性
          lecturerId:'',//讲师id
          uphone:'',//电话号
          uname:'',//讲师真名
          lecturerUserName:'',//讲师名称
          lecturerEmail:'',//邮箱
          sort:'',//排序
          introduce:'',//简介
          bankName:'',//银行名
          bankNum:'',//银行卡号
          bankBranch:'',//银行支行
          uimage: "",
          statusId:'',//状态 1禁用 2正常
          lecturerCreate:'',//入驻时间
          lecturerRoportion:'',//分成情况
          //jobTitle:'',//职位 （后台没有）

        },
        pageData:{//分页和模糊查询的各种属性
          current:1,
          pages:0,
          size:5,
          total:5,
          lecturerUserName:'',
          uphone:'',
          statusId:'',
        },
        rules: {
          clientName: [
            { required: true, message: '请输入讲师分成比例', trigger: 'blur' },
          ],
        },
        formLabelWidth: '120px'
      }
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (row.statusId === 1) {
          return 'warning-row';
        }else {
          return '';
        }
      }
      //查询所有数据，放在住表格中
      ,findAll(){
        this.$axios.post("teacher/teacher/lecturer/findAll",qs.stringify(this.pageData)).then(r=>{
          this.teacherData=r.data.records;
          this.pageData.current=r.data.current;
          this.pageData.pages=r.data.pages;
          this.pageData.total=r.data.total;
          //alert(JSON.stringify(this.pageData))
        })
      },
      //翻页时调用的两个方法
      handleSizeChange(val){
        this.pageData.size=val;
        this.findAll()
      },
      handleCurrentChange(val){
        this.pageData.current=val;
        this.findAll()
      },
      //模糊查询提交的方法
      selectSub(val){
        this.$axios.post("teacher/teacher/lecturer/findAll",qs.stringify(this.pageData)).then(r=>{
          this.teacherData=r.data.records;
          this.pageData.current=r.data.current;
          this.pageData.pages=r.data.pages;
          this.pageData.total=r.data.total;
          this.pageData.lecturerUserName=r.data.lecturerUserName;
          this.pageData.uphone=r.data.uphone;
          this.pageData.statusId=r.data.statusId;
          //alert(JSON.stringify(r.data))
        })
      },
      //点击电话超链接弹出的详细信息框
      getMessage(row){
        //alert(JSON.stringify(row));
        this.dialogVisible=true;
        this.form=row
      },
      //修改状态按钮的方法，此处后台方法是全部修改，因此可以与修改表单公用
      changeStu(row){
        this.$axios.post("/teacher/teacher/lecturer/updStu",qs.stringify(row)).then(r=>{
          if (r.data==true){
            this.$message({
              message: '修改成功！！！',
              type: 'success'
            });
          }else{
            this.$message.error('修改失败！！！');
          }
        })
      },
      //点击修改按钮时弹出修改表单
      handleEdit(row){
        this.dialogFormVisible = true;
        this.form=row;
      },
      //修改表单中的计数器的加减方法
      handleChange(value){
        this.form.sort=value;
      },
      //提交修改表单，因为修改状态的按钮和这个提交都是一样的修改方法，调用修改状态的按钮的方法即可
      subject(form){
        this.changeStu(this.form);
        this.dialogFormVisible = false;
      },
      //设置分成弹框
      handleDelete(row){
        this.setProportion=true;
        this.form=row;
        alert(JSON.stringify(this.form))
      },
      //设置分成提交
      subProportion(form){
        this.setProportion=false;
        this.changeStu(this.form);
      },
    },
    created(){
      this.findAll();
    },
  }
</script>
